<template>
  <div class="false" v-if="errorWords.length>0">
    <div class="form">
      <div class="message">
        本次测试您一共答错了 <span class="error">{{ errorWords.length }}</span> 题，
        测试得分: <span class="sum">{{ usersScore }}</span> 分，再接再厉哦
      </div>
      <div class="title">
        错题展示区域 (勾选单词点击开始测试再次挑战！！！)
      </div>
      <div class="page">
        <EasyDataTable
        ref="dataTable"
        theme-color="#1d90ff"
        table-class-name="customize-table"
        v-model:items-selected = itemsSelected
        hide-footer
        :headers="headers"
        :items="items"
        :rows-per-page="10"
        >
    <!-- <template #cell(name)="data">
      <div class="cell" :style="{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        {{ data.value }}
      </div>
    </template> -->
    <!-- 定制中文释义槽位 防止溢出 -->
    <template #item-chineseExplain="{chineseExplain}">
      <div :style="{ width: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        {{ chineseExplain }}
      </div>
    </template>
    <!-- 定制中文释义槽位 防止溢出 -->
    <!-- 定制音标槽 -->
    <template #item-phonetic="{phonetic,pronunciation}">
      <div :style="{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        <i class="iconfont audio" @click="playAudio(pronunciation)">&#xe610;</i>&nbsp;
        {{ phonetic }}
      </div>
    </template>
    <!-- 定制音标槽/ -->
    <!-- 定制英文意槽 -->
    <template #item-wordname="{wordname}">
      <div :style="{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        {{ wordname }}
      </div>
    </template>
    <!-- 定制英文意槽 -->
        </EasyDataTable>

         <!-- 自定义footer -->
        <div class="customize-buttons">
          <span
            v-for="paginationNumber in maxPaginationNumber"
            :key="paginationNumber"
            class="customize-button"
            :class="{'active': paginationNumber === currentPaginationNumber}"
            @click="updatePage(paginationNumber)"
          >
            {{paginationNumber}}
          </span>
        </div>
      </div>

    </div>

    <coursesFooter></coursesFooter>
  </div>

  <div class="win" v-else>
    <div class="winmessage">
      完美的作答！！！ 满分过关！！！
    </div>
    <div class="imglist">
      <div class="imgCall">
        <div class="square"></div>
        <div class="heng"></div>
        <div class="shu"></div>
        <img src="@/assets/images/call.gif" class="call" alt="">
      </div>

      <div class="imgCall">
        <div class="heng"></div>
        <div class="shu"></div>
        <img src="@/assets/images/call.gif" class="call" alt="">
      </div>

      <div class="imgCall">
        <div class="heng"></div>
        <div class="shu"></div>
        <img src="@/assets/images/call.gif" class="call" alt="">
      </div>
    </div>
  </div>
</template>
<script>
// 底部选择栏组件引用
import coursesFooter from './courses-footer.vue'
// 调用成绩更新接口哦
import { updateScore, refreshDb } from '@/api/courses'
import store from '@/store'
export default {
  name: 'point-show',
  data () {
    return {
      // 错误单词合集
      errorWords: [],
      // 用户得分
      usersScore: 0,
      headers: [
        { text: '单词', value: 'wordname', width: 60 },
        { text: '音标', value: 'phonetic', width: 200 },
        { text: '释义', value: 'chineseExplain', width: 400 }
      ],
      items: [
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' }
      ],
      // 选中的数据
      itemsSelected: [],
      maxPaginationNumber: 2,
      currentPaginationNumber: 1
    }
  },
  components: {
    coursesFooter
  },
  methods: {
    // 点击小喇叭播放读音
    playAudio (src) {
      const audio = new Audio()
      audio.src = src
      audio.play()
    },
    // 跳转至指定单词页面
    updatePage (num) {
      // console.log(num)
      this.currentPaginationNumber = num
      const dataTable = this.$refs.dataTable
      dataTable.updatePage(num)
    }
  },
  // 侦听选择单词的改变
  watch: {
    itemsSelected (item1, item2) {
      // const store = useStore()
      this.$store.commit('courses/setTest', item1)
    }
  },
  created () {
    // 读取vuex存储的错词 存入数组
    this.errorWords = store.state.courses.errorWords
    store.state.courses.score.forEach(element => {
      this.usersScore = this.usersScore + element.point
    })
    // 存入item 绑定表格
    this.items = this.errorWords
    // 调用接口更新成绩
    console.log(JSON.stringify(store.state.courses.score))
    updateScore({ score: JSON.stringify(store.state.courses.score) }, this.$route.query).then(res => {
      // console.log(store.state.courses.score)
      console.log(res.data)
      refreshDb(this.$route.query).then(res => {
        console.log(res.data)
      })
    })
  },
  mounted () {

  }
}
</script>
<style scoped lang="less">
.customize-table {
  --easy-table-border: none;
  --easy-table-row-border: none;

  --easy-table-header-font-size: 14px;
  --easy-table-header-height: 20px;
  --easy-table-header-font-color: #181818;
  --easy-table-header-background-color: #ffffff;

  --easy-table-header-item-padding: 10px 15px;

  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #ffffff;

  --easy-table-body-row-font-color: #000000;
  --easy-table-body-row-background-color: #ffffff;
  --easy-table-body-row-height: 30px;
  --easy-table-body-row-font-size: 14px;
  --easy-table-body-row-width:200px;

  --easy-table-body-row-hover-font-color: #000000;
  --easy-table-body-row-hover-background-color: #ffffff;

  --easy-table-body-item-padding: 6px 10px;

  --easy-table-footer-background-color: #ffffff;
  --easy-table-footer-font-color: #969696;
  --easy-table-footer-font-size: 14px;
  --easy-table-footer-padding: 10px 10px;
  --easy-table-footer-height: 50px;

  --easy-table-rows-per-page-selector-width: 70px;
  --easy-table-rows-per-page-selector-option-padding: 10px;
  --easy-table-rows-per-page-selector-z-index: 1;

  --easy-table-scrollbar-track-color: #2d3a4f;
  --easy-table-scrollbar-color: #2d3a4f;
  --easy-table-scrollbar-thumb-color: #4c5d7a;;
  --easy-table-scrollbar-corner-color: #2d3a4f;

  --easy-table-loading-mask-background-color: #2d3a4f;
}

.false{
  .audio{
    cursor: pointer;
    &:active{
      color: #3e87e5;
    }
  }
  .page{
    position: relative;
  }
  .customize-buttons{
    z-index: 1;
    position: absolute;
    bottom: -40px;
    left: 45%;
    display: flex;
    .customize-button{
      cursor: pointer;
      padding: 10px 15px;
      background-color: #b5b5b5;
      border: none;
      border-radius: 5px;
      font-size: 12px;
      font-weight: bold;
      color: #333;
      cursor: pointer;
      margin-right: 10px;
      transition: background-color 0.3s ease;
      &:hover{
        background-color: #555;
        color: #fff;
      }
    }
    .active{
      background-color: #3e87e5;
      color: white;
    }
  }

  .title{
    height: 30px;
    line-height: 30px;
    text-align: center;
    color:#666;
    font-size: 14px;
    font-family: '钉钉进步体';
  }

  .message{
    font-family: '钉钉进步体';
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    .error{
      color: red;
    }
    .sum{
      color: #3e87e5;
    }
  }
}

.win{
  display: flex;
  flex-direction: column;
.winmessage{
  font-family: '钉钉进步体';
  color: rgb(85, 247, 139);
  font-size: 32px;
  margin: 0 auto;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.imglist{
  height: 200px;
  display: flex;
  background-color: white;
  .imgCall{
    margin-left: 10%;
    width: 300px;
    height: 300px;

    .heng{
      position: absolute;
      background-color: white;
      height: 60px;
      width: 140px;
    }
    .shu{
      position: absolute;
      bottom: 150px;
      background-color: white;
      height: 200px;
      width: 34px;
    }

    .call{
      width: 80%;
    }
}

  }
}

.returnHome{
  cursor: pointer;
  font-family: '钉钉进步体';
  text-align: center;
  height: 20px;
  line-height: 20px;
}
</style>
